<template>
	<view>
		<uni-card :isFull="true" class="video_box" v-for="(item, index) in list" :key="index" @tap="jump(item.vid)">
			<view class="video_box_pic">
				<image :src="item.coverUrl" mode=""></image>
			</view>
			<view class="video_box_title">{{item.title}}</view>
			<text class="iconfont icon-bofang_o play"></text>
		</uni-card>

		<uni-load-more status="loadStatus"></uni-load-more>
	</view>
</template>

<script>
	import util from '@/utils/util.js';
	export default {
		name: "u-video-list",
		
		props: {		
			list: {
				type: Array,
				default: []
			},
			
			loadStatus: {
				type: String,
				default: 'loading'
			}
		},
		
		data() {
			return {

			};
		},
		
		mounted() {
			uni.$on('videoListOnReachBottom', function(keywords,  offset){	
				setTimeout(()=>{ 
					uni.$emit('search', {keywords: keywords, offset: offset, type: 1014});
				}, 500);
				
			});
		},
		
		methods: {
			jump(id){
				console.log(id)
				util.jump('navigateTo', '/pages/mv/paly?mid='+ id);
			}
		}
	}
</script>

<style>
	@import url("@/static/css/iconfont.css");

	.video_box {
		width: 100%;
		padding: 0 !important;
		margin-bottom: 10px !important;
		border: 0 !important;
	}

	/deep/.uni-card {
		padding: 0 !important;
		margin-bottom: 10px !important;
		border: 0 !important;
	}

	/deep/.uni-card__content {
		padding: 0 !important;
	}

	.video_box .video_box_pic {
		width: 100%;
		height: 200px;
	}

	.video_box .video_box_pic image {
		width: 100%;
		height: 100%;
	}

	.video_box .video_box_title {
		width: 100%;
		height: 40px;
		text-align: center;
		line-height: 40px;
		font-size: 14px;
		color: #fff;
		background-color: #0000008a;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.video_box .play {
		color: #fff;
		font-size: 46px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-20px, -20px);
	}
</style>
